<template>
    <div class="madp-add-speech">
        <basic-container>
            <BackTitle @goBack="goBack" />
        </basic-container>
        <basic-container>
            <el-row>
                <el-col :span="6">
                    <div class="madp-customerInfo">
                        <div class="madp-customerInfo-photo">
                            <div class="madp-customerInfo-photo-hade">客户账号</div>
                            <div class="madp-customerInfo-photo-box">
                                <i class="el-icon-s-custom"></i>
                                <p>{{ addForm.words }}</p>
                            </div>
                            <div v-if="addForm.imgSrc" class="madp-customerInfo-photo-box">
                                <i class="el-icon-s-custom"></i>
                                <div class="madp-imgbox">
                                    <img :src="addForm.imgSrc" />
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="madp-customerdetail">
                        <el-form label-position="right" :model="addForm" ref="addForm" :rules="rules" label-width="140px">
                            <el-form-item label="企业微信成员" prop="rangeType">
                                <el-radio-group v-model="addForm.rangeType" @change="selectRangeType">
                                    <el-radio :label="1">通用</el-radio>
                                    <el-radio :label="2">指定部门</el-radio>
                                </el-radio-group>
                                <el-button :disabled="addForm.rangeType === 1 ? true : false" class="madp-addmember" @click="addMemder">添加部门</el-button>
                                <div v-if="employeeNum != 0" class="madp-member-info">
                                    <el-popover placement="top-start" width="400" trigger="hover" v-if="selectedMembers && selectedMembers.length > 0">
                                        <div class="madp-member-wrap">
                                            <el-tag type="primary" style="margin: 2px" v-for="(item, index) in selectedMembers" :key="index">{{ item.employeeName }}</el-tag>
                                        </div>
                                        <div slot="reference">
                                            <span> 已选择{{ employeeNum }}名成员 </span>
                                        </div>
                                    </el-popover>
                                    <el-button
                                        class="madp-reset-btn"
                                        @click="
                                            () => {
                                                this.employeeIdList = '';
                                                this.addForm.employees = '';
                                                this.employeeNum = 0;
                                                this.dialogShow = false;
                                                this.selectedMembers = [];
                                            }
                                        "
                                        >重置</el-button
                                    >
                                </div>
                            </el-form-item>
                            <el-form-item label="文本内容" prop="words">
                                <el-input type="textarea" maxlength="500" show-word-limit v-model.trim="addForm.words"></el-input>
                                <el-button class="madp-addname" icon="el-icon-plus" @click="addCustomerName">添加客户名称</el-button>
                                <div class="madp-option">提示:火狐浏览器可能出现无法正确插入客户名称，请使用谷歌，360浏览器</div>
                            </el-form-item>
                            <el-form-item label="添加内容类型">
                                <el-button @click="(dialogNewPic = true), (imageUrls.url = '')">图片</el-button>
                                <el-button @click="showDialog('imgText')">图文</el-button>
                                <el-button @click="showDialog('applet')">小程序</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="isEdit" type="primary" @click="editSure('addForm')">确定</el-button>
                                <el-button v-else type="primary" @click="sure('addForm')">确定</el-button>
                                <el-button @click="backList">取消</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 图片弹框 -->
                        <el-dialog title="选择素材" :visible.sync="dialogImage" :before-close="handleClose" width="55%" :close-on-click-modal="false">
                            <div class="madp-imgbox-top">
                                <el-form :inline="true" :model="formImg" ref="formImg" class="demo-form-inline" v-if="type === 2" label-width="140px">
                                    <el-form-item class="madp-spaceleft">
                                        <el-button @click="(dialogNewPic = true), (imageUrls.url = '')">本地上传</el-button>
                                    </el-form-item>
                                </el-form>
                                <div v-loading="listLoading" class="madp-imglist" v-if="imgList.length > 0">
                                    <div class="madp-imglist-img-box" v-for="item in imgList" :key="item.id">
                                        <img v-if="item.type === 2" :src="item.content[0].content.url" alt @click="chooseImg(item)" />
                                        <div v-if="item.type === 3" @click="choosePicTxt(item)" :class="addForm.mediumId === item.id ? 'active' : null">
                                            <img :src="item.content[0].content.imgUrl" />
                                        </div>
                                        <div v-if="item.type === 6" @click="choosePicTxt(item)" :class="addForm.mediumId === item.id ? 'active' : null">
                                            <img :src="item.content[0].content.imgUrl" />
                                        </div>
                                    </div>
                                </div>
                                <div v-else>暂无数据</div>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="closeDialog('dialogImage')">取消</el-button>
                                <el-button type="primary" @click="materialSure('dialogImage')">确定</el-button>
                            </span>
                        </el-dialog>
                        <!-- 新建图片素材 弹框 -->
                        <el-dialog title="新建图片素材" :visible.sync="dialogNewPic" width="55%" :close-on-click-modal="false">
                            <div class="madp-imgbox-top">
                                <el-form :model="newPicData" ref="newPicData" class="demo-form-inline" label-width="140px">
                                    <el-form-item label="上传图片:" prop="url">
                                        <el-upload
                                            v-loading="loading"
                                            class="avatar-uploader"
                                            list-type="picture"
                                            action="admin/sys-file/upload"
                                            accept="image/jpg, image/jpeg, image/png, image/gif"
                                            :show-file-list="false"
                                            :auto-upload="false"
                                            :on-change="coverUpload"
                                            :limit="1"
                                            :file-list="fileList"
                                        >
                                            <img v-if="imageUrls.url !== ''" :src="imageUrls.url" class="madp-addimg" />
                                            <div v-else class="img-icon">
                                                <i class="el-icon-plus"></i>
                                            </div>
                                        </el-upload>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="closeDialog('dialogNewPic')">取消</el-button>
                                <el-button type="primary" @click="speechcraftHandle(2)">确定</el-button>
                            </span>
                        </el-dialog>
                        <!-- 图文 弹框 -->
                        <el-dialog title="图文" :visible.sync="dialogData" width="55%" :close-on-click-modal="false">
                            <div class="madp-imgbox-top">
                                <el-form :model="formData" :rules="formRules" ref="formData" class="demo-form-inline" label-width="140px">
                                    <el-form-item v-if="formData.addMethod === '导入'" label="图片">
                                        <el-button type="primary" @click="selectTypeList(3)">选择图文</el-button>
                                    </el-form-item>
                                    <div v-else>
                                        <el-form-item label="点击跳转" prop="link">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input @blur="getLinkArticle" v-model.trim="formData.link" placeholder="请输入跳转链接，且必须以http://或https://开头"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                        <el-form-item label="图片封面" prop="imgUrl">
                                            <el-upload
                                                v-loading="loading"
                                                class="avatar-uploader"
                                                list-type="picture"
                                                action="admin/sys-file/upload"
                                                accept="image/jpg, image/jpeg, image/png, image/gif"
                                                :show-file-list="false"
                                                :auto-upload="false"
                                                :on-change="coverUpload"
                                                :limit="1"
                                                :file-list="fileList"
                                            >
                                                <img v-if="formData.imgUrl" :src="formData.imgUrl" class="madp-addimg" />
                                                <div v-else class="img-icon">
                                                    <i class="el-icon-plus"></i>
                                                </div>
                                            </el-upload>
                                        </el-form-item>
                                        <el-form-item label="填写标题" prop="title">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input v-model.trim="formData.title" maxlength="10"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                        <el-form-item label="添加描述" prop="description">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input maxlength="500" type="textarea" show-word-limit v-model.trim="formData.description"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="closeDialog('dialogData')">取消</el-button>
                                <el-button type="primary" @click="speechcraftHandle(3)">确定</el-button>
                            </span>
                        </el-dialog>
                        <!-- 小程序 弹框 -->
                        <el-dialog title="小程序" :visible.sync="dialogApplet" width="55%" :close-on-click-modal="false">
                            <div class="madp-imgbox-top">
                                <el-form :model="formApplet" :rules="appletRules" ref="formApplet" class="demo-form-inline" label-width="140px">
                                    <el-form-item v-if="formApplet.addMethod === '导入'" label="小程序">
                                        <el-button type="primary" @click="selectTypeList(6)">选择小程序</el-button>
                                    </el-form-item>
                                    <div v-else>
                                        <el-form-item label="图片封面">
                                            <el-upload
                                                v-loading="loading"
                                                class="avatar-uploader"
                                                list-type="picture"
                                                action="admin/sys-file/upload"
                                                accept="image/jpg, image/jpeg, image/png, image/gif"
                                                :show-file-list="false"
                                                :auto-upload="false"
                                                :on-change="coverUpload"
                                                :limit="1"
                                                :file-list="fileList"
                                            >
                                                <img v-if="imageUrls.url !== ''" :src="imageUrls.url" class="madp-addimg" />
                                                <div v-else class="img-icon">
                                                    <i class="el-icon-plus"></i>
                                                </div>
                                            </el-upload>
                                        </el-form-item>
                                        <el-form-item label="填写标题" prop="title">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input v-model.trim="formApplet.title" maxlength="10"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                        <el-form-item label="appId" prop="appId">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input type="textarea" v-model.trim="formApplet.appId" maxlength="18"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                        <el-form-item label="路径" prop="url">
                                            <el-row>
                                                <el-col :span="18">
                                                    <el-input type="textarea" v-model.trim="formApplet.url" maxlength="50"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="closeDialog('dialogApplet')">取消</el-button>
                                <el-button type="primary" @click="speechcraftHandle(6)">确定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </el-col>
            </el-row>
        </basic-container>
        <el-dialog title="选择指定部门" :visible.sync="dialogShow" width="40%" :close-on-click-modal="false">
            <el-tree ref="tree" :data="departTree" show-checkbox node-key="id" :default-checked-keys="defaultMultipleValue" :props="defaultProps1"></el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import addmember from '@/components/wechat/add-member';
import { getMediumList, addWelcome, editWelcome, postGreeting } from '@/api/customer-into/welcomespeech';
import { parseLink } from '@/api/customer-into/marketing-material';
import { getMediumGroup, upload } from '@/api/customer-into/verbal-manage';
import { fetchTree } from '@/api/admin/dept';
export default {
    name: 'madp-add-speech',
    components: {
        addmember
    },
    data() {
        let urlCheck = (rule, value, callback) => {
            if (value.startsWith('http') || value.startsWith('https') || value.startsWith('HTTP') || value.startsWith('HTTPS')) {
                callback();
            } else {
                callback(new Error('请输入正确的链接地址'));
            }
        };
        return {
            // 树组件props
            defaultProps1: {
                children: 'children',
                label: 'name'
            },
            // 表单校验规则
            rules: {
                rangeType: [
                    {
                        required: true,
                        message: '请选择企业微信成员',
                        trigger: 'change'
                    }
                ],
                words: [
                    {
                        required: true,
                        message: '请填写文本内容',
                        trigger: 'blur'
                    }
                ]
            },
            sortList: [],
            showAddMember: false,
            // 新增表单对象
            addForm: {
                member: '通用',
                imgSrc: '',
                employees: '',
                greetingId: '',
                mediumId: '',
                rangeType: 1,
                type: 1,
                words: ''
            },
            // 弹窗开关
            dialogImage: false,
            dialogData: false,
            dialogApplet: false,
            dialogNewPic: false,
            formImg: {
                mediumGroupId: ''
            },
            // 图片list
            imgList: [],
            newPicData: {
                imgUrl: '',
                group: '',
                sync: '不同步'
            },
            formData: {
                addMethod: '新建',
                title: '',
                description: '',
                sync: '不同步',
                group: '',
                link: '',
                appId: '',
                imgUrl: ''
            },
            formApplet: {
                addMethod: '新建',
                title: '',
                sync: '不同步',
                appId: '',
                url: ''
            },
            currentDialog: {
                type: 'img', //img/imgText/applet
                showDialog: ''
            },
            formRules: {
                //图文表单规则
                link: [
                    {
                        required: true,
                        message: '请输入跳转链接',
                        trigger: 'blur'
                    },
                    { validator: urlCheck, trigger: 'blur' }
                ],
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }
                ],
                group: [{ required: true, message: '请选择分组', trigger: 'change' }]
            },
            appletRules: {
                //小程序表单规则
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }
                ],
                appId: [
                    {
                        required: true,
                        message: '请输入appId',
                        trigger: 'blur'
                    }
                ],
                url: [
                    {
                        required: true,
                        message: '请输入路径',
                        trigger: 'blur'
                    }
                ],
                group: [{ required: true, message: '请选择分组', trigger: 'change' }]
            },
            imageUrls: {
                url: ''
            }, //上传图片信息
            type: 2,
            mediumGroupId: '',
            isEdit: false,
            employeeNum: 0, //指定部门人数
            // 列表loading
            listLoading: false,
            // 弹窗开关
            dialogShow: false,
            selectedMembers: [], // 选中的人员
            welType: '',
            fileList: [],
            // loading开关
            loading: false,
            //初始值
            defaultMultipleValue: [],
            // 部门树数据
            departTree: []
        };
    },
    created() {
        if (this.$route.params.msg) {
            this.welType = this.$route.params.msg.type;
            this.isEdit = true;
            let msgs = this.$route.params.msg;
            if (msgs.deptIds) this.defaultMultipleValue = JSON.parse(JSON.stringify(msgs.deptIds));
            let memberList = msgs.employees.map((item) => item.id);
            this.selectedMembers = msgs.employees.map((item) => ({
                employeeId: item.id,
                employeeName: item.name
            }));
            this.employeeNum = msgs.rangeType === 1 ? 0 : memberList.length;
            if (msgs.type === 6) {
                this.addForm = {
                    imgSrc: msgs.mediumContent[0].content.imgUrl,
                    employees: msgs.rangeType === 1 ? '' : memberList.toString(),
                    greetingId: msgs.greetingId,
                    mediumId: msgs.mediumId,
                    rangeType: msgs.rangeType,
                    type: msgs.mediumContent[0].type,
                    words: msgs.words,
                    formApplet: {
                        addMethod: msgs.mediumContent[0].content.type,
                        title: msgs.mediumContent[0].content.title,
                        appId: msgs.mediumContent[0].content.appId,
                        url: msgs.mediumContent[0].content.url,
                        sync: msgs.mediumContent[0].content.sync,
                        group: msgs.mediumContent[0].content.group
                    }
                };
            } else if (msgs.type === 2) {
                this.addForm = {
                    imgSrc: msgs.mediumContent[0].content.url,
                    employees: msgs.rangeType === 1 ? '' : memberList.toString(),
                    greetingId: msgs.greetingId,
                    mediumId: msgs.mediumId,
                    rangeType: msgs.rangeType,
                    type: msgs.mediumContent[0].type,
                    words: msgs.words,
                    newPicData: {
                        imgSrc: msgs.mediumContent[0].content.url,
                        sync: msgs.mediumContent[0].content.sync,
                        group: msgs.mediumContent[0].content.group
                    }
                };
            } else if (msgs.type === 3) {
                this.addForm = {
                    imgSrc: msgs.mediumContent[0].content.imgUrl,
                    employees: msgs.rangeType === 1 ? '' : memberList.toString(),
                    greetingId: msgs.greetingId,
                    mediumId: msgs.mediumId,
                    rangeType: msgs.rangeType,
                    type: msgs.mediumContent[0].type,
                    words: msgs.words,
                    formData: {
                        addMethod: msgs.mediumContent[0].content.type, //添加方式
                        link: msgs.mediumContent[0].content.link,
                        imgUrl: msgs.mediumContent[0].content.imgUrl,
                        title: msgs.mediumContent[0].content.title,
                        description: msgs.mediumContent[0].content.description,
                        sync: msgs.mediumContent[0].content.sync,
                        group: msgs.mediumContent[0].content.group
                    }
                };
            } else if (msgs.type === 1) {
                this.addForm = {
                    imgSrc: '',
                    employees: msgs.rangeType === 1 ? '' : memberList.toString(),
                    greetingId: msgs.greetingId,
                    mediumId: msgs.mediumId,
                    rangeType: msgs.rangeType,
                    type: msgs.type,
                    words: msgs.words
                };
            }
        }
    },
    methods: {
        // 点击确定
        handleSubmit() {
            let checkIds = this.$refs.tree.getCheckedKeys();
            if (checkIds.length < 1) return this.$message.warning('请选择可见范围');
            this.defaultMultipleValue = checkIds;
            this.dialogShow = false;
        },
        // 点击返回
        goBack() {
            this.$router.push({
                path: '/customers-into/welcome-speech/index'
            });
        },
        //根据type查询话术库列表
        getList(type) {
            let params = {
                type: type || this.type,
                mediumGroupId: this.formImg.mediumGroupId
            };
            this.listLoading = true;
            getMediumList(params)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.imgList = res.data.data.records;
                    }
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        //话术分组列表
        getMediumGroupList() {
            getMediumGroup().then((res) => {
                if (res.data.code === 0) {
                    this.sortList = res.data.data.slice(1);
                }
            });
        },
        // 选择导入图文或小程序
        selectTypeList(type) {
            switch (type) {
                case 3:
                    this.dialogImage = true;
                    break;
                case 6:
                    this.dialogImage = true;
                    break;
            }
            this.getList(type);
        },
        //模态框取消按钮
        closeDialog(formName) {
            this[formName] = false;
            if (formName == 'dialogImage') {
                this.$refs.formImg.resetFields();
            } else if (formName == 'dialogNewPic') {
                this.$refs.newPicData.resetFields();
                this.imageUrls.url = '';
            } else if (formName == 'dialogData') {
                this.$refs.formData.resetFields();
                this.formData.imgUrl = '';
            } else if (formName == 'dialogApplet') {
                this.$refs.formApplet.resetFields();
                this.imageUrls.url = '';
            }
        },
        // 关闭图片模态框自带的关闭按钮
        handleClose() {
            this.dialogImage = false;
            this.dialogData = false;
            this.dialogApplet = false;
        },
        //取消新增欢迎语，返回列表页
        backList() {
            this.$router.push({
                path: '/customers-into/welcome-speech/index'
            });
        },
        //根据URL解析地址
        getLinkArticle() {
            let http = this.formData.link;
            if (http.startsWith('http://') || http.startsWith('HTTP://') || http.startsWith('https://') || http.startsWith('HTTPS://')) {
                parseLink({ url: http }).then((res) => {
                    if (res.data.code === 0 && res.data.data.link !== '') {
                        this.formData = { ...this.formData, ...res.data.data };
                    }
                });
            } else {
                this.$message.error('请输入正确的跳转链接!');
            }
        },
        // 上传图文封面
        coverUpload(res) {
            if (res.raw.size / 1024 / 1024 > 5) {
                this.$message.error('上传不能超过5M');
                this.fileList = [];
                return;
            }
            this.fileList = [];
            this.loading = true;
            // 创建FormData对象
            let param = new FormData();
            // 将得到的文件流添加到FormData对象
            param.append('file', res.raw);
            upload(param)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        this.imageUrls = res.data.data;
                        this.formData.imgUrl = res.data.data.url;
                        this.formData.size = res.data.data.fileSize;
                        if (res.data.data.fileSize / 1024 / 1024 >= 1) {
                            this.formData.size = (res.data.data.fileSize / 1024 / 1024).toFixed(2) + 'M';
                        } else {
                            this.formData.size = (res.data.data.fileSize / 1024).toFixed(2) + 'KB';
                        }
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 选择分组
        selectMediumGroupId(e) {
            this.mediumGroupId = e;
        },
        //话术库请求数据处理
        speechcraftHandle(type) {
            let dto = {};
            if (type === 3) {
                this.$refs.formData.validate((validate) => {
                    if (validate) {
                        //新建图文
                        dto = {
                            isSync: this.formData.sync == '不同步' ? 2 : 1,
                            mediumGroupId: this.mediumGroupId == '' ? 0 : this.mediumGroupId,
                            replyList: [
                                {
                                    type: 3,
                                    content: this.formData
                                }
                            ]
                        };
                        this.newSpeechcraft(type, dto);
                    }
                });
            } else if (type === 2) {
                if (this.imageUrls.url !== '') {
                    dto = {
                        isSync: this.newPicData.sync == '不同步' ? 2 : 1,
                        mediumGroupId: this.mediumGroupId == '' ? 0 : this.mediumGroupId,
                        replyList: [
                            {
                                type: 2,
                                content: {
                                    url: this.imageUrls.url,
                                    size: this.imageUrls.fileSize
                                }
                            }
                        ]
                    };
                    this.newSpeechcraft(type, dto);
                } else {
                    this.$message({
                        type: 'error',
                        message: '请上传图片'
                    });
                }
            } else if (type === 6) {
                this.$refs.formApplet.validate((validate) => {
                    if (validate) {
                        dto = {
                            isSync: this.formApplet.sync == '不同步' ? 2 : 1,
                            mediumGroupId: this.mediumGroupId == '' ? 0 : this.mediumGroupId,
                            replyList: [
                                {
                                    type: 6,
                                    content: {
                                        page: this.formApplet.url,
                                        appid: this.formApplet.appId,
                                        index: 0,
                                        title: this.formApplet.title,
                                        imgUrl: this.imageUrls.url
                                    }
                                }
                            ]
                        };
                        this.newSpeechcraft(type, dto);
                    }
                });
            }
        },
        // 新建话术库
        newSpeechcraft(type, obj) {
            this.addForm.type = type;
            console.log('hehehhe---', type, obj);
            postGreeting(obj).then((res) => {
                console.log(888, res);
                if (res.data.code === 0) {
                    //根据id查询话术库
                    this.addForm.imgSrc = this.formData.imgUrl;
                    this.addForm.mediumId = res.data.data;
                    this.$forceUpdate();
                    if (type == 2) {
                        this.dialogNewPic = false;
                    } else if (type == 3) {
                        this.dialogData = false;
                    } else if (type == 6) {
                        this.dialogApplet = false;
                    }
                    this.dialogImage = false;
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
            });
        },
        //是否选择指定部门
        selectRangeType() {
            if (this.addForm.rangeType === 1) {
                this.addForm.employees = '';
                this.employeeNum = 0;
            }
        },
        // 获取成员数据
        getMemberList(data) {
            let memberList = data.map((item) => item.employeeId);
            this.addForm.employees = memberList.toString();
            console.log(this.addForm.employees);
            this.employeeNum = memberList.length;
            this.selectedMembers = data;
        },
        closepop() {
            this.showAddMember = false;
        },
        // 新增成员
        addMemder() {
            this.showAddMember = true;
            this.dialogShow = true;
            fetchTree().then((res) => {
                this.departTree = res.data.data;
            });
        },
        addCustomerName() {
            this.addForm.words = this.addForm.words + '##用户名称##';
        },
        //确认选择图片信息
        chooseImg(item) {
            this.dialogImage = false;
            this.addForm.imgSrc = item.content[0].content.url;
            this.addForm.mediumId = item.id;
            this.addForm.type = 2;
        },
        // 选中图文信息
        choosePicTxt(item) {
            this.addForm.mediumId = item.id;
            this.addForm.imgSrc = item.content[0].content.imgUrl;
            this.addForm.type = 3;
        },
        // 素材模态框确认
        materialSure(dialogName) {
            if (this.imgList.length > 0) {
                if (this.addForm.mediumId !== '') {
                    this.dialogData = false;
                    this.dialogImage = false;
                    this.dialogApplet = false;
                } else {
                    this.$message.error('请选择素材!');
                }
            } else {
                this.closeDialog(dialogName);
            }
        },
        // 打开弹窗
        showDialog(data) {
            switch (data) {
                case 'img':
                    this.currentDialog.type = data;
                    this.dialogImage = true;
                    this.getList(2);
                    break;
                case 'imgText':
                    this.currentDialog.type = data;
                    this.dialogData = true;
                    break;
                case 'applet':
                    this.currentDialog.type = data;
                    this.dialogApplet = true;
                    break;
            }
        },
        //确认添加
        sure(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.addForm.rangeType === 2 && this.defaultMultipleValue.length > 0) this.addForm.deptIds = this.defaultMultipleValue;
                    if (this.addForm.rangeType === 2 && (!this.addForm.deptIds || this.addForm.deptIds.length === 0)) {
                        this.$message.error('请选择指定部门！');
                    } else if (!(this.addForm.mediumId === '' && this.addForm.words === '')) {
                        if (this.addForm.words.length > 500) {
                            this.$message.error('文本内容不能超过500个字符！');
                        } else {
                            if (this.addForm.rangeType == 2) this.addForm.deptIds = this.addForm.deptIds.join(',');
                            addWelcome(this.addForm).then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '新增欢迎语成功！'
                                    });
                                    this.backList();
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        //确认修改
        editSure(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.addForm.rangeType === 2 && this.defaultMultipleValue.length > 0) this.addForm.deptIds = this.defaultMultipleValue;
                    if (this.addForm.rangeType === 2 && (!this.addForm.deptIds || this.addForm.deptIds.length === 0)) {
                        this.$message.error('请选择指定部门！');
                    } else if (!(this.addForm.mediumId === '' && this.addForm.words === '')) {
                        if (this.addForm.words.length > 500) {
                            this.$message.error('文本内容不能超过500个字符！');
                        } else {
                            if (this.addForm.rangeType == 2) this.addForm.deptIds = this.addForm.deptIds.join(',');
                            editWelcome(this.addForm).then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '修改欢迎语成功！'
                                    });
                                    this.backList();
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        searchFn() {
            this.getList();
        },
        // 选择素材弹框内 重置
        restImgForm() {
            this.formImg.mediumGroupId = '';
            this.getList();
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-reset-btn {
    margin-left: 110px;
}
.madp-add-speech /deep/ .el-card {
    background-color: rgb(240, 242, 245);
}
.madp-add-speech {
    .madp-customerInfo {
        color: #606266;
        background: #fff;
        width: 90%;
        min-height: 215px;
        border: 1px solid #e8e8e8;
        padding-top: 20px;
        padding-bottom: 10px;
        .madp-customerInfo-photo {
            &-hade {
                min-height: 48px;
                padding: 0 24px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
                font-size: 16px;
                background: transparent;
                border-bottom: 1px solid #e8e8e8;
                border-radius: 2px 2px 0 0;
                zoom: 1;
            }
            &-box {
                width: 100%;
                padding: 10px;
                display: flex;
                padding: 24px;
                i {
                    color: #1890ff;
                    font-size: 40px;
                }
                p {
                    margin-left: 20px;
                    width: 75%;
                    background: #f3f6fb;
                    padding: 10px;
                    border-radius: 4px 5px 5px 0px;
                    word-wrap: break-word;
                }
                .madp-imgbox {
                    margin-left: 20px;
                    width: 200px;
                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }
    .madp-customerdetail {
        min-width: 800px;
        background: #fff;
        width: 100%;
        min-height: 415px;
        border: 1px solid #e8e8e8;
        padding: 20px;
        padding-right: 60px;
        .madp-chooseimginfo {
            line-height: 40px;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            i {
                font-size: 20px;
                &:last-child {
                    &:hover {
                        color: #1890ff;
                    }
                }
            }
        }
        .madp-addmember {
            margin-left: 40px;
        }
        .madp-addname {
            margin: 10px 0;
        }
        .madp-option {
            width: fit-content;
            height: 38px;
            padding: 5px;
            background-color: rgba(255, 191, 191, 0.4);
            border: 1px solid rgba(255, 191, 191, 0.6);
            border-radius: 4px;
            font-size: 14px;
            line-height: 28px;
            color: #ed5555;
        }
    }
    .madp-imgbox-top {
        .madp-select {
            margin-left: 20px;
        }
        .madp-addimg {
            width: 90px;
            height: 90px;
            border: 1px dashed #ccc;
            text-align: center;
            line-height: 80px;
            font-size: 50px;
            font-weight: 800px;
        }
        .img-icon {
            width: 90px;
            height: 90px;
            border: 1px dashed #ccc;
            text-align: center;
            line-height: 90px;
            font-size: 50px;
            font-weight: 800px;
        }
        .madp-imglist {
            width: 100%;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            &-img-box {
                width: 150px;
                height: 150px;
                border-radius: 4px;
                margin: 5px;
            }
            img {
                width: 100%;
                height: auto;
                max-height: 100%;
                border-radius: 4px;
                &:hover {
                    border: 1px solid #e8e8e8;
                }
            }
        }
        .madp-spaceleft {
            margin-left: 20px;
        }
        padding: 10px;
    }
}
.active {
    width: 150px;
    height: 150px;
    border-radius: 4px;
    margin: 5px;
    position: relative;
    border: 2px solid blue;
    img {
        width: 100%;
        height: auto;
        max-height: 100%;
        border-radius: 4px;
    }
    span {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 35px;
        background: #000;
        opacity: 0.4;
        color: #fff;
        line-height: 35px;
        padding: 0 5px;
        border-radius: 0 0 4px 4px;
    }
}
.madp-member-wrap {
    max-height: 300px;
    overflow: auto;
}
.madp-member-info {
    display: flex;
}
/deep/ .el-textarea__inner {
    min-height: 250px !important;
}
</style>
